// 默认情况下，直接使用webpack .\src\main.js   .\dist\bundle.js就能实现项目的构建了；
// 但是如果只运行webpack命令的话，需要在项目的根目录中创建“webpack.config.js”的文件
// 而且在这个配置文件中，必须显示声明，要处理文件的路径 和 输出文件的路径

const path =require("path");


// 导入 把HTML页面生成到内存中的插件
const htmlWebpackPlugin=require("html-webpack-plugin")


// 使用Node中的语法，向外暴露了一个配置对象
module.exports={
    entry:path.join(__dirname,"./src/main.js"),//指定要处理的JS文件路径
    output:{//指定输出文件的配置
        path:path.join(__dirname,"./dist"),//指定文件的存放路径
        filename:"bundle.js"//指定输出文件的名称
    },
    plugins:[//插件的数组
        new htmlWebpackPlugin({//创建一个把HTML首页托管到内存中的插件
            template:path.join(__dirname,"./src/index.html"),//需要把哪个HTML页面作为模板复制一份托管到内存中
            filename:"index.html"//指定，将来在内存中辅助出来的页面，名称叫做index,html

        })
    ],
    module:{//用来配置非JS文件对应的loader的
        rules:[//就是这些非JS文件和loader之间的对应关系
            {test:/\.css$/,use:["style-loader","css-loader"]},//创建处理css文件的loader匹配规则

            // {test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]}//创建处理scss文件的loader匹配规则

            // 可以使用?limit=  来限制图片的大小，单位是字节
            // 如果图片大小 小于limit的话，会转为base64格式的图片，否则，不转换
            {test:/\.jpg|png|gif|bmp$/,use:["url-loader?limit=2150"]},

            {test:/\.js$/,use:"babel-loader",exclude:/node_modules/},
            {test:/\.vue$/,use:"vue-loader"},
            {test:/\.ttf|woff|woff2|eot|svg$/,use:"url-loader"},//处理样式汇总字体文件路径的问题


        ]

    },
    resolve:{
        alias:{//别名
            "vue$":"vue/dist/vue.js"
        }
    }
}